<template>
  <require from="./pool.css"></require>
  <require from="../../../../styles/sections.css"></require>
  <div class="section-panel" id="js-general-pool-section">
    <div class="panel__heading">Pool</div>
    <div class="panel__content">
      <table class="props-table">
        <tr>
          <th>Version</th>
          <td>
            <input type="text" class="props-input" value.bind="businessObjInPanel.processRef.versionTag" change.delegate="publishDiagramChange()" disabled.bind="!isEditable">
          </td>
        </tr>
        <tr>
          <th>ID
            <input class="process-id-checkbox" type="checkbox" checked.bind="processIdCheckboxChecked" disabled.bind="!isEditable" title="Allow editing process ID">
          </th>
          <td>
            <input type="text" id="processId" class="props-input" class.bind="validationError ? 'props-input--error' : ''" value.bind="processRefId & validateOnChange" change.delegate="updateId()"  disabled.bind="!isEditable || !processIdCheckboxChecked">
            <span if.bind="validationError" class="validation-error__message">${validationErrorMessage}</span>
          </td>
          <td>
            <template if.bind="validationError">
              <i class="fas fa-times validation-error"></i>
            </template>
          </td>
        </tr>
        <tr>
          <th>Name</th>
          <td>
            <input type="text" class="props-input" value.bind="businessObjInPanel.processRef.name" change.delegate="publishDiagramChange()" disabled.bind="!isEditable">
          </td>
        </tr>
      </table>
    </div>
  </div>

  <modal if.bind="showModal"
         header-text="Warning: Editing Process ID">
    <template replace-part="modal-body">
      Changing a process ID can potentially break your deployments! Only perform this action if you know what you are doing!
    </template>
    <template replace-part="modal-footer">
      <label><input type="checkbox" checked.bind="showProcessIdWarningModal"> Don't show again</label>
      <button type="button" class="btn btn-primary" data-dismiss="modal" click.delegate="closeModal()">Okay</button>
    </template>
  </modal>
</template>
